@ts-nocheck
<template>
  <el-dialog title="添加" v-model="showDialog" width="360px" draggable append-to-body>
    <div>
      <el-form label-width="80px" v-if="showInput">
        <el-form-item label="起始时间">
          <el-time-select placeholder="起始时间" v-model="selectedTimeStrings[0]" @change="handleChange" start="00:00"
            step="00:30" end="23:30" :editable="false" :clearable="false" style="width:calc(100% - 70px);">
          </el-time-select>
          <el-tag style="margin-left:12px;" :type="dateDelays[0] == 1 ? 'warning' : 'success'">+{{ dateDelays[0] }}
          </el-tag>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-time-select placeholder="结束时间" v-model="selectedTimeStrings[1]" @change="handleChange" start="00:00"
            step="00:30" end="23:30" :editable="false" :clearable="false" style="width:calc(100% - 70px);">
          </el-time-select>
          <el-tag style="margin-left:12px;"
            :type="dateDelays[1] == 2 ? 'danger' : (dateDelays[1] == 1 ? 'warning' : 'success')">
            +{{ dateDelays[1] }}</el-tag>
        </el-form-item>
      </el-form>
      <div style="text-align:center" v-show="showSubmit">
        <el-button type="primary" @click="handleCreate">添加</el-button>
        <el-button text @click="showDialog = false">取消</el-button>
      </div>
      <!-- <div>{{selectedTimeStrings[0]}} - {{selectedTimeStrings[1]}}</div> -->
    </div>
  </el-dialog>
</template>

<script>
import capacityStore from '@/store/capacity.js';
import { mapState } from 'pinia';
import dateFormat from '@/utils/dateFormat.js';
export default {
  name: 'createView',
  emits: ['createItem'],
  data() {
    return {
      showDialog: false,
      showInput: false,
      showSubmit: true,
      selectedTimeStrings: ['00:00', '01:30'],
      pickerOptions: {
        start: '00:00',
        end: '23:30',
        step: '00:30',
        // selectableRange: ['00:00:00', '23:59:59'],
      },
      dateTimes: [new Date(), new Date()],
      dateTimeStrings: ['', ''],
      dateDelays: [0, 0],
    }
  },
  computed: {
    ...mapState(capacityStore, ['areaLayout']),
  },
  methods: {
    dateFormat,
    openCreate() {
      this.showDialog = true;
      // ----------------------------------------------------------------
      // in test mode, startTime begins from now, step set as 1min. 
      // ----------------------------------------------------------------
      // let d1 = new Date();
      // d1.setMinutes(d1.getMinutes() + 10);
      // this.pickerOptions = {
      //   start: dateFormat('HH:MM'),
      //   end: dateFormat('HH:MM', d1),
      //   step: '00:01',
      // };
      // ----------------------------------------------------------------
      // set default value
      // ----------------------------------------------------------------
      let h = parseInt(this.dateFormat('HH')) + 1;
      if (h > 23) h = h - 24;
      this.selectedTimeStrings[0] = (h) + ':00';
      h = parseInt(this.dateFormat('HH')) + 2;
      if (h > 23) h = h - 24;
      this.selectedTimeStrings[1] = (h) + ':00';
      this.handleChange();
      this.showInput = false;
      this.$nextTick(() => {
        this.showInput = true;
      });
    },
    handleChange() {
      let today = new Date();
      this.dateDelays[0] = 0;
      this.dateDelays[1] = 0;
      // parse selectedTimeStrings into integer values
      let timeValues = [
        [
          parseInt(this.selectedTimeStrings[0].split(':')[0]),
          parseInt(this.selectedTimeStrings[0].split(':')[1])
        ],
        [
          parseInt(this.selectedTimeStrings[1].split(':')[0]),
          parseInt(this.selectedTimeStrings[1].split(':')[1])
        ],
      ];
      // define dateTimes as timeValues of today
      let startDate = new Date();
      startDate.setHours(timeValues[0][0], timeValues[0][1], 0, 0);
      let endDate = new Date();
      endDate.setHours(timeValues[1][0], timeValues[1][1], 0, 0);
      // judge startDate is after today
      if (today.getTime() > startDate.getTime()) {
        this.dateDelays[0] = 1;
        this.dateDelays[1] = 1;
        startDate.setDate(startDate.getDate() + 1);
        endDate.setDate(endDate.getDate() + 1);
      }
      // judge endDate is after startDate
      if (startDate.getTime() >= endDate.getTime()) {
        this.dateDelays[1] = this.dateDelays[0] + 1;
        endDate.setDate(endDate.getDate() + 1);
      }
      endDate.setSeconds(59);
      this.dateTimes = [startDate, endDate];
      this.dateTimeStrings = [
        this.dateFormat("YYYY-mm-dd HH:MM:SS", startDate),
        this.dateFormat("YYYY-mm-dd HH:MM:SS", endDate),
      ];
      this.showInput = false;
      this.$nextTick(() => {
        this.showInput = true;
      });
    },
    handleCreate() {
      let item = {
        start: this.dateTimeStrings[0],
        end: this.dateTimeStrings[1],
        content: JSON.parse(JSON.stringify(this.areaLayout)),
      }
      // console.log(item);
      this.$emit('createItem', item);
      this.showDialog = false;
    },
  },
}
// example: [
// {
//   areaCode: 'a1', // 区域编码（预设）
//   areaType: 1, // 是否有机场相关（预设）
//   originalCapacity: 100, // 原始通行能力（预设）
//   raletedModels: [], // 相关管制模块（预设）
//   raletedGatePoints: [], // 相关移交点（预设）
//   weatherConditions: [], // 天气情况（输入）
//   weatherIntensity: 0, // 天气强度等级（计算）
//   weatherProbability: 1, // 天气概率等级（输入）
//   weatherCoverage: 0, // 天气覆盖率等级（输入）
//   airportCount: 1, // 受天气影响的机场数量（输入）
//   currentCapacity: 50, // 当前通行能力（计算）
//   capacityRatio: 0.5, // 通行能力比例（计算）
// }],
</script>

<style scoped>
</style>